<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() +
			request.getContextPath() + "/";
%>
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
	<meta charset="utf-8">
	<title>修改密码</title>
	<base href="<%=basePath%>">
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="format-detection" content="telephone=no">
	<link rel="stylesheet" href="${pageContext.request.contextPath}/static/resources/layui/css/layui.css" media="all"/>
	<link rel="stylesheet" href="${pageContext.request.contextPath}/static/resources/css/public.css" media="all"/>
</head>
<body class="childrenBody">
<form class="layui-form layui-row changePwd" id="changePwd" onsubmit="return false">
	<div class="layui-col-xs12 layui-col-sm6 layui-col-md6" style="margin-left: 300px;margin-top: 150px">
		<div class="layui-form-item">
			<label class="layui-form-label">用户名</label>
			<div class="layui-input-block">
				<input type="text" value="${sessionScope.get("userInfo").loginName}" disabled
					   class="layui-input layui-disabled">
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">旧密码</label>
			<div class="layui-input-block">
				<input type="password" value="" name="oldPwd" placeholder="请输入旧密码" lay-verify="required"
					   class="layui-input pwd">
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">新密码</label>
			<div class="layui-input-block">
				<input type="password" value="" name="newPwd" placeholder="请输入新密码" lay-verify="required|newPwd"
					   id="newPwd" class="layui-input pwd">
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">确认密码</label>
			<div class="layui-input-block">
				<input type="password" value="" name="confirmPwd" placeholder="请确认密码"
					   lay-verify="required|confirmPwd" class="layui-input pwd">
			</div>
		</div>
		<div class="layui-form-item">
			<div class="layui-input-block">
				<button class="layui-btn" lay-submit lay-filter="doChange" id="doChange">立即修改</button>
				<button type="reset" class="layui-btn layui-btn-primary">重置</button>
			</div>
		</div>
	</div>
</form>
<script type="text/javascript" src="${pageContext.request.contextPath}/static/resources/layui/layui.js"></script>
<script type="text/javascript">

	layui.use(['jquery', 'layer', 'form'], function () {
		const $ = layui.jquery;
		const layer = layui.layer;
		const form = layui.form;
		//添加验证规则
		form.verify({
			newPwd: function (value, item) {
				if (value.length < 6) {
					return "密码长度不能小于6位";
				}
			},
			confirmPwd: function (value, item) {
				if (!new RegExp($("#newPwd").val()).test(value)) {
					return "两次输入密码不一致，请重新输入！";
				}
			}
		})
		//表单提交数据
		form.on("submit(doChange)", function (result) {
			//序列化表单数据
			const formData = $("#changePwd").serialize();
			const url = "user/changePwd";
			$.post(url, formData, function (result) {
				if (result.code > 0) {
					layer.alert(result.msg, {
						icon: 1
					})
					location.href = "login/toLogin";
				} else {
					layer.alert(result.msg, {
						icon: 0
					})
				}
			});
			return false;
		})
	});
</script>
</body>
</html>